<template>
  <div class="weibo-quick-post">
    <div class="post-header">
      <span class="post-title">发布博客</span>
    </div>
    <el-input
        v-model="form.title"
        type="text"
        placeholder="帖子标题"
        class="post-input"
        :disabled="isGenerating"
    />
    <el-input
        v-model="form.text"
        type="textarea"
        :rows="4"
        placeholder="有什么新鲜事想分享给大家？"
        class="post-input"
        :disabled="isGenerating"
    />

    <div class="toolbar">
      <div class="tool-icons">
        <el-button type="text" class="tool-icon" :disabled="isGenerating">
          <el-icon><Picture /></el-icon>
        </el-button>
        <el-upload drag style="width:100%"
                   action="/api/file/myboke"
                   :on-success="handleImageUploadSuccess"
                   :disabled="isGenerating"
        >
          <el-icon class="el-icon--upload"><UploadFilled/></el-icon>
          <div class="el-upload__text">将图片拖拽到此处，或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持 jpg/png 格式， 大小不超过 5M</div>
          </template>
        </el-upload>
        <el-button type="text" class="tool-icon" :disabled="isGenerating">
          <el-icon><VideoCamera /></el-icon>
        </el-button>
        <el-upload drag style="width:100%"
                   action="/api/file/myboke"
                   :on-success="handleVideoUploadSuccess"
                   :disabled="isGenerating"
        >
          <el-icon class="el-icon--upload"><UploadFilled/></el-icon>
          <div class="el-upload__text">将视频拖拽到此处，或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持 mp4等视频格式</div>
          </template>
        </el-upload>
        <el-button type="text" class="tool-icon" @click="showAIDialog" :disabled="isGenerating">
          <el-icon><MagicStick /></el-icon>
          <span>AI生成文案</span>
        </el-button>
      </div>

      <div class="post-actions">
        <el-button
            type="primary"
            class="post-button"
            @click="submitPost"
            :disabled="isGenerating"
        >
          发送
        </el-button>
      </div>
    </div>

    <!-- AI生成文案对话框 -->
    <el-dialog v-model="aiDialogVisible" title="AI文案生成" width="500px" :close-on-click-modal="!isGenerating">
      <el-form :model="aiForm" label-width="80px">
        <el-form-item label="文章主题">
          <el-input v-model="aiForm.topic" placeholder="请输入文章主题" :disabled="isGenerating"></el-input>
        </el-form-item>
        <el-form-item label="文章字数">
          <el-select v-model="aiForm.wordCount" placeholder="请选择字数" :disabled="isGenerating">
            <el-option label="50字" value="100"></el-option>
            <el-option label="100字" value="200"></el-option>
            <el-option label="150字" value="300"></el-option>
            <el-option label="200字" value="500"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章风格">
          <el-select v-model="aiForm.style" placeholder="请选择风格" :disabled="isGenerating">
            <el-option label="正式" value="formal"></el-option>
            <el-option label="轻松" value="casual"></el-option>
            <el-option label="幽默" value="humorous"></el-option>
            <el-option label="专业" value="professional"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="aiDialogVisible = false" :disabled="isGenerating">取消</el-button>
        <el-button type="primary" @click="generateContent" :disabled="isGenerating">
          <template v-if="isGenerating">
            <el-icon class="el-icon-loading" style="margin-right: 5px;"></el-icon>
            生成中...
          </template>
          <template v-else>生成</template>
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const yhm=ref(userStore.yhm);
const id=ref(userStore.id);

console.log(yhm.value);
console.log(id.value);
import {ElMessage} from "element-plus";
import {
  Picture,
  VideoCamera,
  ChatDotRound,
  Document,
  More,
  UploadFilled,
  MagicStick,
  Loading
} from '@element-plus/icons-vue';
import axios from "axios";


const postScope = ref('public');

const form = ref({
  text: '',
  userId: id,
  time: '',
  url: '', // 用于存储图片URL
  video: '', // 新增字段，用于存储视频URL
  title: '',
});

// AI生成相关状态
const aiDialogVisible = ref(false);
const aiForm = ref({
  topic: '',
  wordCount: '200',
  style: 'casual'
});

// 新增：生成状态标记
const isGenerating = ref(false);

const handleImageUploadSuccess = (response, uploadFile, uploadFiles) => {
  const allUrls = uploadFiles
      .map(file => file.response)
      .filter(Boolean);
  form.value.url = allUrls.join(',');
};

const handleVideoUploadSuccess = (response, uploadFile, uploadFiles) => {

  const allUrls = uploadFiles
      .map(file => file.response)
      .filter(Boolean);
  form.value.video = allUrls.join(','); // 将视频URL存储在video字段中
};

const showAIDialog = () => {
  aiDialogVisible.value = true;
};

const generateContent = async () => {
  // 验证表单
  if (!aiForm.value.topic) {
    ElMessage.warning('请输入文章主题');
    return;
  }

  try {
    // 开始生成，设置状态
    isGenerating.value = true;

    // 显示生成中提示
    ElMessage({
      message: 'AI正在生成内容，请稍候...',
      type: 'info',
      duration: 0,
      showClose: true
    });

    // 调用AI生成API
    const {data} = await axios.post("/api/DeepSeek", {
      question: aiForm.value.topic,
      num: aiForm.value.wordCount,
      style: aiForm.value.style
    });

    form.value.text = data;
    aiDialogVisible.value = false;
    ElMessage.success('文案生成成功');
  } catch (error) {
    ElMessage.error('文案生成失败: ' + error.message);
  } finally {
    // 无论成功失败，都结束生成状态
    isGenerating.value = false;
  }
};

const emits = defineEmits(["closeDialog", "flushPage"]);
const submitPost = async () => {
  const {data} = await axios.post("/api/post", form.value);
  console.log(data);
  if(data>0){
    ElMessage.success('操作成功');
    emits("closeDialog");
  }
  else{
    ElMessage.error('操作失败');
  }
};
</script>

<style scoped>
.weibo-quick-post {
  width: 600px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.post-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.post-input {
  margin: 16px 0;
}

:deep(.post-input .el-textarea__inner) {
  border: 1px solid #ff8200;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  min-height: 100px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.tool-icons {
  display: flex;
  gap: 8px;
}

.tool-icon {
  font-size: 20px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scope-select {
  width: 100px;
}

.post-button {
  background-color: #ff8200;
  border-color: #ff8200;
  padding: 8px 20px;
}

.post-button:hover {
  background-color: #e67300;
  border-color: #e67300;
}
</style>